<template>
  <div style="background: white; padding: 5px">
    <a-space>
      <div>切换店铺</div>
      <a-select v-model="curShopId" style="width: 200px">
        <a-option v-for="(item, index) of shopList" :key="index" :value="item.id">{{ item.shopName }}</a-option>
      </a-select>
    </a-space>

    <div class="mt5 my-tab">
      <div @click="curIndex = item" :class="['cursor', curIndex == item ? 'active' : '']" v-for="(item, index) of tabArr" :key="index">{{ item }}</div>
    </div>
  </div>
  <category ref="Category" :shopId="curShopId" v-if="curIndex == '分类'" />
  <tag ref="Tag" v-if="curIndex == '标签'" :shopId="curShopId" />
  <property ref="Property" :shopId="curShopId" v-if="curIndex == '属性'" />
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  // import { findShopPageByParam } from '@/api/system'
  import { listAllUserWordPressShop } from '@/api/product'
  import category from './components/category.vue'
  import tag from './components/tag.vue'
  import property from './components/property.vue'
  const Category = ref()
  const Tag = ref()
  const Property = ref()
  let shopList: any = ref([])
  let curShopId = ref('')
  let curIndex = ref('分类')
  let tabArr = ['分类', '标签', '属性']
  const getLsit = async () => {
    let params = {
      pageSize: 999999,
      platform: 'wooCommerce',
    }
    const res: any = await listAllUserWordPressShop(params)
    shopList.value = res.data || []
    curShopId.value = shopList.value[0].id
  }

  onMounted(() => {
    getLsit()
  })
</script>

<style lang="less" scoped>
  .my-tab {
    width: 240px;
    display: flex;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    div {
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-right: 1px solid #d7d7d7;
      &:last-child {
        border-right: none;
      }
    }
    .active {
      background-color: #4080ff;
      color: white;
    }
  }
</style>
